<!--
*@description 医师签名
*@fileName elect-sign.vue
*@author wxl
*@date 2025/05/20 10:23:23
!-->
<template>
  <div class="vue-box">
    <div class="c-card elect-sign">
      <div class="aic">
        <div class="margin-right">医师签字</div>
        <el-image style="width: 200px; height: 100px" :src="doctorurl" :fit="fit"></el-image>
        <img class="sign-btn" src="../../assets/sign.png" alt="" @click="handleOpen" />
        <el-button class="margin-left-lg" type="primary" @click="openUploadDialog">上传手写签名</el-button>
      </div>
      
    </div>
    <sign-dialog ref="signRef" uploadType="55" @saveSign="saveSign"></sign-dialog>
    <el-dialog v-model="dialogVisible" title="上传签名" width="500px" :before-close="closeUploadDialog"  append-to="body">
      <div class="sign-box padding">
        <in-input
          type="img"
          prop="uploadAccessoryId"
          name="手写签名"
          uploadType="55"
          v-model="uploadAccessoryId"
          :limit="1"
          required
        ></in-input>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="confirm"> 保存签字 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import {ElMessage} from "element-plus";
import signDialog from '@/components/sign-dialog/sign-dialog.vue';

const doctorurl = ref('')
const signRef = ref(null)
const uploadAccessoryId = ref('')   // 上传的手写签名图片id
const dialogVisible = ref(false)
// 组件加载时触发
onMounted(() => {
  f5()
})
const f5 = function () {
  let params = {}
  sa.ajax('/api/webOnlineInquiry/querydoctorurl', params, function (res) {
    if (res.code == 1) {
      doctorurl.value = res.data.doctorurl
    }
  })
}

function handleOpen() {
  signRef.value.open()
}

function handleClose() {
  signRef.value.close()
}

// 打开上传签名弹窗
function openUploadDialog() {
  dialogVisible.value = true
}

// 关闭上传签名弹窗
function closeUploadDialog() {
  dialogVisible.value = false
}
// const handleDone = (img) => {
//   console.log('签名结果:', img)
// }
// // 清空签名
// function clear() {
//    signRef.value.clear()
// }
async function confirm() {
  if(!uploadAccessoryId.value) {
    ElMessage.warning('请上传手写签名')
    return
  }
  console.log('uploadAccessoryId', uploadAccessoryId.value)
  saveSign(uploadAccessoryId.value)
  closeUploadDialog()
}

// // Base64转Blob
// const base64ToBlob = (base64) => {
//   const arr = base64.split(',')
//   const mime = arr[0].match(/:(.*?);/)[1]
//   const bstr = atob(arr[1])
//   let n = bstr.length
//   const u8arr = new Uint8Array(n)
//   while (n--) {
//     u8arr[n] = bstr.charCodeAt(n)
//   }
//   return new Blob([u8arr], { type: mime })
// }

// // 上传到服务端
// const uploadSignature = async (blob) => {
//   const formData = new FormData()
//   const filename = `${Date.now()}.png`
//   formData.append('file', blob, filename)
//   formData.append('type', '55') // 可以添加其他元数据

//   const loginInfo = useUserStore().loginInfo || {}

//   const response = await axios.post('/api/attachmentUpload/attachmentUpload', formData, {
//     headers: {
//       'Content-Type': 'multipart/form-data',
//       username: loginInfo.username || '',
//       password: loginInfo.password || '',
//     },
//   })
//   console.log('response', response)
//   if (response.data.code == '1' && response.data.data) {
//    saveSign(response.data.data.accessoryId)
//   }
// }

// 保存签名文件 
async function saveSign(subAccessoryId) {
  let params = {
    subAccessoryId,
  }
  sa.ajax('/api/webOnlineInquiry/updatedoctorurl', params, function (res) {
    if (res.code == '1') {
      handleClose()
      ElMessage.success('签名保存成功')
      f5()
    }else {
      
    }
  })
}
</script>
<style lang="scss" scoped>
.elect-sign {
  min-height: calc(100% - 2em);
  padding: 30px 50px;
  .sign-btn {
    width: 36px;
    height: 32px;
    margin-left: 50px;
    position: relative;
    top: 5px;
    cursor: pointer;
  }
  .sign-box{
   // border: 2px dashed #ccc;
  }
}
</style>
